<template>
  <div class="g-drag-width">
    <div class="g-drag-width-left" ref="refDargLeft">
      {{ leftWidth }}
      <slot name="left"></slot>
      <div class="g-drag-move-line" ref="dragLine" @mousedown="down">
        <div>
          <svg
            t="1660547509958"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2389"
            width="32"
            height="32"
            style="fill: #fff"
          >
            <path
              d="M341.333333 85.333333h101.973334v101.973334H341.333333V85.333333z m231.765334 0h101.973333v101.973334h-101.973333V85.333333zM341.333333 326.4h101.973334v101.973333H341.333333V326.4z m231.765334 0h101.973333v101.973333h-101.973333V326.4zM341.333333 567.381333h101.973334v101.973334H341.333333v-101.973334z m231.765334 0h101.973333v101.973334h-101.973333v-101.973334zM341.333333 808.490667h101.973334v101.973333H341.333333v-101.973333z m231.765334 0h101.973333v101.973333h-101.973333v-101.973333z"
              p-id="2390"
              data-spm-anchor-id="a313x.7781069.0.i5"
              class="selected"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="g-drag-width-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, computed } from 'vue'

const props = defineProps({
  leftWidth: Number,
  leftMinWidth: Number
})
const _leftWidth = ref(props._leftWidth || 400)
const _leftMinWidth = ref(props.leftMinWidth || 100)
const dragLine = ref()
const refDargLeft = ref()
const isStart = ref(false)
const startX = ref(0)
const offsetX = ref(0)

function down(e) {
  isStart.value = true
  startX.value = e.pageX
}

function move(e) {
  if (isStart.value) {
    let w = _leftWidth.value + e.pageX - startX.value
    if (w < _leftMinWidth.value) {
      w = _leftMinWidth.value
    }
    refDargLeft.value.style.width = w + 'px'
    refDargLeft.value.style.minWidth = w + 'px'
    offsetX.value = w
  }
}

function up(e) {
  isStart.value = false
  _leftWidth.value = offsetX.value
}

onMounted(() => {
  refDargLeft.value.style.width = _leftWidth.value + 'px'
  refDargLeft.value.style.minWidth = _leftWidth.value + 'px'
  window.addEventListener('mousemove', move)
  window.addEventListener('mouseup', up)
})
onUnmounted(() => {
  window.removeEventListener('mousemove', move)
  window.removeEventListener('mouseup', up)
})
</script>

<style lang="less">
.g-drag-width {
  width: 100%;
  display: flex;
  background: #fff;
  border-radius: @border-radius-container;
  overflow: auto;
  .g-drag-move-line {
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: 2px;
    right: 6px;
    border-left: 1px solid #ccc;
    cursor: col-resize;
    & > div {
      position: absolute;
      width: 12px;
      background: #ddd;
      height: 30px;
      border-radius: 6px;
      padding: 4px 0;
      left: -6px;
      top: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      // span {
      //   width: 3px;
      //   height: 3px;
      //   border-radius: 3px;
      //   background: #fff;
      // }
    }
  }
  .g-drag-width-left {
    position: relative;
    padding: 12px 20px 12px 12px;
  }
  .g-drag-width-right {
    flex: 1;
    overflow: auto;
  }
}
</style>
